<template>
  <div class="trainers-page">
    <div class="container">
      <!-- Search and Filter Section -->
      <div class="search-section">
        <h1 class="page-title">专业私教库</h1>
        <div class="search-filters">
          <div class="search-bar">
            <input 
              v-model="searchQuery" 
              type="text" 
              placeholder="搜索私教姓名或专业领域..."
              class="search-input"
            >
            <button class="search-btn">🔍</button>
          </div>
          
          <div class="filter-row">
            <select v-model="filters.city" class="filter-select">
              <option value="">选择城市</option>
              <option value="北京">北京</option>
              <option value="上海">上海</option>
              <option value="广州">广州</option>
              <option value="深圳">深圳</option>
              <option value="杭州">杭州</option>
            </select>
            
            <select v-model="filters.specialty" class="filter-select">
              <option value="">健身类型</option>
              <option value="增肌">增肌</option>
              <option value="减脂">减脂</option>
              <option value="康复">康复训练</option>
              <option value="塑形">塑形</option>
              <option value="力量">力量训练</option>
            </select>
            
            <select v-model="filters.certification" class="filter-select">
              <option value="">认证资质</option>
              <option value="ACSM">ACSM认证</option>
              <option value="NASM">NASM认证</option>
              <option value="ACE">ACE认证</option>
              <option value="NSCA">NSCA认证</option>
            </select>
            
            <select v-model="filters.rating" class="filter-select">
              <option value="">用户评分</option>
              <option value="5">5星</option>
              <option value="4">4星以上</option>
              <option value="3">3星以上</option>
            </select>
            
            <select v-model="filters.priceRange" class="filter-select">
              <option value="">价格范围</option>
              <option value="0-200">¥0-200/课时</option>
              <option value="200-400">¥200-400/课时</option>
              <option value="400-600">¥400-600/课时</option>
              <option value="600+">¥600+/课时</option>
            </select>
          </div>
        </div>
      </div>

      <!-- Results Section -->
      <div class="results-section">
        <div class="results-header">
          <span class="results-count">找到 {{ filteredTrainers.length }} 位私教</span>
          <select v-model="sortBy" class="sort-select">
            <option value="rating">按评分排序</option>
            <option value="price">按价格排序</option>
            <option value="experience">按经验排序</option>
            <option value="availability">按可预约时间排序</option>
          </select>
        </div>

        <!-- Trainers Grid -->
        <div class="trainers-grid">
          <div 
            v-for="trainer in filteredTrainers" 
            :key="trainer.id"
            class="trainer-card"
            @click="goToTrainerDetail(trainer.id)"
          >
            <div class="trainer-avatar">
              <img :src="trainer.avatar" :alt="trainer.name" />
              <div class="availability-badge" :class="trainer.availability">
                {{ trainer.availability === 'available' ? '可预约' : '忙碌中' }}
              </div>
            </div>
            
            <div class="trainer-info">
              <h3 class="trainer-name">{{ trainer.name }}</h3>
              <div class="trainer-rating">
                <span class="stars">{{ '★'.repeat(Math.floor(trainer.rating)) }}</span>
                <span class="rating-score">{{ trainer.rating }}</span>
                <span class="review-count">({{ trainer.reviewCount }}条评价)</span>
              </div>
              
              <div class="trainer-specialties">
                <span 
                  v-for="specialty in trainer.specialties" 
                  :key="specialty"
                  class="specialty-tag"
                >
                  {{ specialty }}
                </span>
              </div>
              
              <div class="trainer-details">
                <div class="detail-item">
                  <span class="label">经验:</span>
                  <span class="value">{{ trainer.experience }}年</span>
                </div>
                <div class="detail-item">
                  <span class="label">价格:</span>
                  <span class="value">¥{{ trainer.price }}/课时</span>
                </div>
                <div class="detail-item">
                  <span class="label">地区:</span>
                  <span class="value">{{ trainer.city }}</span>
                </div>
              </div>
              
              <div class="trainer-certifications">
                <span 
                  v-for="cert in trainer.certifications" 
                  :key="cert"
                  class="cert-badge"
                >
                  {{ cert }}
                </span>
              </div>
            </div>
            
            <div class="trainer-actions">
              <button class="btn btn-primary btn-small">查看详情</button>
              <button class="btn btn-secondary btn-small">立即预约</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// Reactive data
const searchQuery = ref('')
const sortBy = ref('rating')
const filters = ref({
  city: '',
  specialty: '',
  certification: '',
  rating: '',
  priceRange: ''
})

// Mock trainer data
const trainers = ref([
  {
    id: 1,
    name: '张健',
    avatar: 'https://via.placeholder.com/150/667eea/ffffff?text=张健',
    rating: 4.9,
    reviewCount: 128,
    specialties: ['增肌', '力量训练'],
    experience: 5,
    price: 350,
    city: '北京',
    certifications: ['ACSM', 'NASM'],
    availability: 'available',
    bio: '专业健身教练，擅长力量训练和增肌指导'
  },
  {
    id: 2,
    name: '李美',
    avatar: 'https://via.placeholder.com/150/764ba2/ffffff?text=李美',
    rating: 4.8,
    reviewCount: 95,
    specialties: ['减脂', '塑形'],
    experience: 3,
    price: 280,
    city: '上海',
    certifications: ['ACE', 'NSCA'],
    availability: 'available',
    bio: '女性健身专家，专注减脂塑形训练'
  },
  {
    id: 3,
    name: '王强',
    avatar: 'https://via.placeholder.com/150/4299e1/ffffff?text=王强',
    rating: 4.7,
    reviewCount: 156,
    specialties: ['康复', '功能性训练'],
    experience: 8,
    price: 450,
    city: '广州',
    certifications: ['ACSM', 'NSCA'],
    availability: 'busy',
    bio: '康复训练专家，帮助运动损伤恢复'
  },
  {
    id: 4,
    name: '陈雨',
    avatar: 'https://via.placeholder.com/150/48bb78/ffffff?text=陈雨',
    rating: 4.6,
    reviewCount: 73,
    specialties: ['瑜伽', '普拉提'],
    experience: 4,
    price: 220,
    city: '深圳',
    certifications: ['ACE'],
    availability: 'available',
    bio: '瑜伽普拉提导师，专注身心平衡'
  },
  {
    id: 5,
    name: '刘峰',
    avatar: 'https://via.placeholder.com/150/ed8936/ffffff?text=刘峰',
    rating: 4.9,
    reviewCount: 203,
    specialties: ['增肌', '减脂', '力量训练'],
    experience: 7,
    price: 400,
    city: '杭州',
    certifications: ['ACSM', 'NASM', 'NSCA'],
    availability: 'available',
    bio: '全能型私教，多项认证资质'
  },
  {
    id: 6,
    name: '赵敏',
    avatar: 'https://via.placeholder.com/150/9f7aea/ffffff?text=赵敏',
    rating: 4.5,
    reviewCount: 89,
    specialties: ['塑形', '有氧训练'],
    experience: 2,
    price: 180,
    city: '北京',
    certifications: ['ACE'],
    availability: 'available',
    bio: '年轻活力教练，擅长有氧塑形'
  }
])

// Computed properties
const filteredTrainers = computed(() => {
  let result = trainers.value

  // Search filter
  if (searchQuery.value) {
    result = result.filter(trainer => 
      trainer.name.includes(searchQuery.value) ||
      trainer.specialties.some(s => s.includes(searchQuery.value))
    )
  }

  // City filter
  if (filters.value.city) {
    result = result.filter(trainer => trainer.city === filters.value.city)
  }

  // Specialty filter
  if (filters.value.specialty) {
    result = result.filter(trainer => 
      trainer.specialties.includes(filters.value.specialty)
    )
  }

  // Certification filter
  if (filters.value.certification) {
    result = result.filter(trainer => 
      trainer.certifications.includes(filters.value.certification)
    )
  }

  // Rating filter
  if (filters.value.rating) {
    const minRating = parseInt(filters.value.rating)
    result = result.filter(trainer => trainer.rating >= minRating)
  }

  // Price range filter
  if (filters.value.priceRange) {
    const [min, max] = filters.value.priceRange.split('-').map(p => 
      p.includes('+') ? Infinity : parseInt(p)
    )
    result = result.filter(trainer => 
      trainer.price >= min && (max === Infinity || trainer.price <= max)
    )
  }

  // Sort
  result.sort((a, b) => {
    switch (sortBy.value) {
      case 'rating':
        return b.rating - a.rating
      case 'price':
        return a.price - b.price
      case 'experience':
        return b.experience - a.experience
      case 'availability':
        return a.availability === 'available' ? -1 : 1
      default:
        return 0
    }
  })

  return result
})

// Methods
const goToTrainerDetail = (trainerId) => {
  router.push(`/trainer/${trainerId}`)
}

onMounted(() => {
  // Initialize component
})
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-title {
  font-size: 2.5rem;
  color: #2d3748;
  margin-bottom: 2rem;
  text-align: center;
}

/* Search Section */
.search-section {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
}

.search-filters {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.search-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.search-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 25px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
}

.search-input:focus {
  border-color: #667eea;
}

.search-btn {
  padding: 0.75rem 1.5rem;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.search-btn:hover {
  background: #5a67d8;
}

.filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.filter-select {
  padding: 0.75rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.3s ease;
}

.filter-select:focus {
  border-color: #667eea;
}

/* Results Section */
.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.results-count {
  font-size: 1.1rem;
  color: #4a5568;
  font-weight: 600;
}

.sort-select {
  padding: 0.5rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  outline: none;
}

/* Trainers Grid */
.trainers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
}

.trainer-card {
  background: white;
  border-radius: 15px;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.trainer-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.trainer-avatar {
  position: relative;
  text-align: center;
  margin-bottom: 1rem;
}

.trainer-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.availability-badge {
  position: absolute;
  top: 0;
  right: 50%;
  transform: translateX(50%);
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.availability-badge.available {
  background: #48bb78;
  color: white;
}

.availability-badge.busy {
  background: #ed8936;
  color: white;
}

.trainer-name {
  font-size: 1.3rem;
  font-weight: bold;
  color: #2d3748;
  margin-bottom: 0.5rem;
  text-align: center;
}

.trainer-rating {
  text-align: center;
  margin-bottom: 1rem;
}

.stars {
  color: #ffd700;
  font-size: 1.2rem;
}

.rating-score {
  font-weight: bold;
  color: #2d3748;
  margin-left: 0.5rem;
}

.review-count {
  color: #718096;
  font-size: 0.9rem;
}

.trainer-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  justify-content: center;
}

.specialty-tag {
  background: #e6fffa;
  color: #319795;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
}

.trainer-details {
  margin-bottom: 1rem;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.label {
  color: #718096;
  font-size: 0.9rem;
}

.value {
  color: #2d3748;
  font-weight: 600;
  font-size: 0.9rem;
}

.trainer-certifications {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  justify-content: center;
}

.cert-badge {
  background: #667eea;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
}

.trainer-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  font-size: 0.9rem;
}

.btn-small {
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
}

.btn-primary {
  background: #4299e1;
  color: white;
}

.btn-primary:hover {
  background: #3182ce;
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: #4299e1;
  border: 2px solid #4299e1;
}

.btn-secondary:hover {
  background: #4299e1;
  color: white;
  transform: translateY(-1px);
}

/* Responsive Design */
@media (max-width: 768px) {
  .trainers-grid {
    grid-template-columns: 1fr;
  }
  
  .filter-row {
    grid-template-columns: 1fr;
  }
  
  .results-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .page-title {
    font-size: 2rem;
  }
}
</style>